<template>
  <div class="contentBox">
    <el-form
      class="replyForm"
      :model="formData"
      ref="formData"
      :rules="formDataRule"
      label-width="90px"
    >
      <div class="mainTitle">规划设计与预算编制批复</div>
      <el-form-item label="实施规模" prop="forceArea">
        <el-input
          v-model="formData.forceArea"
          style="width:200px;"
          placeholder="请输入"
          type="number"
          :min="0"
          :readonly="isCurrentProcess"
        >
          <i slot="suffix">公顷</i>
        </el-input>
      </el-form-item>
      <el-form-item label="投资规模" prop="investmentMoney">
        <el-input
          v-model="formData.investmentMoney"
          style="width:200px;"
          placeholder="请输入"
          type="number"
          :min="0"
          :readonly="isCurrentProcess"
        >
          <i slot="suffix">万元</i>
        </el-input>
      </el-form-item>
      <el-form-item label="下达时间" prop="replyTime">
        <el-date-picker
          v-model="formData.replyTime"
          style="width:200px;"
          placeholder="请选择"
          format="yyyy-MM-DD"
          value-format="yyyy-MM-DD HH:mm:ss"
          :readonly="isCurrentProcess"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="批复文件" prop="planningBudgetReplyFileId">
        <el-upload
          :action="uploadUrl"
          :on-success="uploadSuccess"
          :file-list="fileList"
          :limit="1"
          :disabled="isCurrentProcess"
          accept=".pdf"
          v-if="!isCurrentProcess"
          style="width:300px"
        >
          <el-button type="primary" size="small">点击上传</el-button>
        </el-upload>
        <div class="viewDocment" v-if="isCurrentProcess">
          <seeFujian
            v-if="formData.planningBudgetReplyFile"
            @openPdf="seePdf"
            :file-name="formData.planningBudgetReplyFile | backFileName"
            :file-url="formData.planningBudgetReplyFile.filePath"
          />
          <!-- <span><i class="el-icon-document"/>{{formData.planningBudgetReplyFile | backFileName}}</span>
          <a style="color: rgb(64, 158, 255);margin-left:5px" @click="seePdf(formData.planningBudgetReplyFile.filePath,formData.planningBudgetReplyFile.fileName)">查看</a>-->
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSave" v-if="!isCurrentProcess">提交</el-button>
        <el-button @click="$router.push('/projectManagement/planningStage/dealwith')">返回</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :close-on-click-modal="false" :title="pdfName" :visible.sync="pdfFlag" width="50%">
      <div class="pdfBox">
        <iframe :src="$https + pdfUrl" style="width:100%;height:600px;" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getReplyDetail,
  saveReplyDetail
} from "@/api/plannDesignBudget/plannDesignBudgetReply";
import seeFujian from "@/components/seeFujian";
export default {
  components: {
    seeFujian
  },
  data() {
    return {
      pdfUrl: "",
      pdfFlag: false,
      pdfName: "",
      projectId: localStorage.getItem("projectId"),
      fileList: [],
      uploadUrl: this.$config.uploadUrl,
      baseUrl: this.$config.baseUrl,
      formData: {
        forceArea: "",
        investmentMoney: "",
        replyTime: "",
        planningBudgetReplyFileId: ""
      },
      formDataRule: {
        forceArea: [
          {
            require: true,
            validator: function(rule, value, callback) {
              const v = Number(value);
              if (isNaN(v) || v <= 0) {
                callback(new Error("请正确填写实施规模"));
              }
              callback();
            },
            trigger: "blur"
          }
        ],
        investmentMoney: [
          {
            require: true,
            validator: function(rule, value, callback) {
              const v = Number(value);
              if (isNaN(v) || v <= 0) {
                callback(new Error("请正确填写投资规模"));
              }
              callback();
            },
            trigger: "blur"
          }
        ],
        replyTime: [
          {
            require: true,
            validator: function(rule, value, callback) {
              if (!value || value == "") {
                callback(new Error("请选择下达时间"));
              }
              callback();
            },
            trigger: "blur"
          }
        ],
        planningBudgetReplyFileId: [
          {
            require: true,
            validator: function(rule, value, callback) {
              const v = Number(value);
              if (isNaN(v) || value == "") {
                callback(new Error("请上传批复文件"));
              }
              callback();
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {
    isCurrentProcess: function() {
      let isTrue =
        localStorage.getItem("key") ==
        "PLANNING_DESIGN_AND_BUDGETING_CITY_BUREAU_REPLY";
      if (localStorage.getItem("lookStatus") == 2) {
        isTrue = false;
      }
      return !isTrue;
    }
  },
  filters: {
    backFileName: function(data) {
      if (data) {
        return data.fileName;
      } else {
        return "";
      }
    },
    backFilePath: function(data, baseUrl) {
      if (data) {
        return baseUrl + data.filePath;
      } else {
        return "";
      }
    }
  },
  created() {
    this._initData();
  },
  methods: {
    //查看当前PDF
    seePdf(url, name) {
      this.pdfFlag = true;
      this.pdfUrl = url;
      this.pdfName = name;
    },
    // 保存批复
    handleSave() {
      let isTrue = true;
      this.$refs["formData"].validate(valid => {
        isTrue = Boolean(valid);
      });
      if (isTrue) {
        const data = Object.assign(this.formData, {
          projectId: this.projectId
        });
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        saveReplyDetail(data)
          .then(res => {
            loading.close();
            this.$message.success("操作成功");
            this.$router.push("/projectManagement/planningStage/dealwith");
          })
          .catch(err => {
            loading.close();
          });
      }
    },

    // 文件上传成功
    uploadSuccess(res, file, fileList) {
      this.formData["planningBudgetReplyFileId"] = res.data.id;
      this.$refs["formData"].validate(valid => {});
    },
    // 获取批复详情数据
    _getReplyDetail() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getReplyDetail(this.projectId)
        .then(res => {
          if (res.data) {
            this.formData = res.data;
            this.fileList = res.data.planningBudgetReplyFile && [
              {
                name: res.data.planningBudgetReplyFile.fileName,
                url: res.data.planningBudgetReplyFile.filePath
              }
            ];
          }
          loading.close();
        })
        .catch(err => {
          loading.close();
        });
    },
    // 获取初始化数据
    _initData() {
      this._getReplyDetail();
    }
  }
};
</script>

<style lang="scss" scoped>
.contentBox {
  padding: 30px;
  height: calc(100vh - 114px);
  background: #f5f6f7;
  .replyForm {
    height: 100%;
    background: #fff;
    padding: 20px;
    .mainTitle {
      font-size: 18px;
      color: #4d4d4d;
      font-weight: bold;
      margin-bottom: 30px;
    }
    /deep/ .el-input {
      width: auto;
    }
    /deep/ .el-input__inner {
      width: 200px;
    }
    /deep/ .el-input__suffix-inner {
      i {
        font-style: normal;
      }
    }
    .uploadBtn {
      display: inline-block;
      height: 28px;
      line-height: 28px;
      width: 60px;
      border: 1px solid #ffe4e5e6;
      font-size: 14px;
      color: #a1a3a6;
      border-radius: 2px;
    }
  }
}
</style>
